<template>
  <view class="word-cloud-page">
    <!-- 自定义导航栏 -->

    <view class="nav-bar" :style="{height: navBarHeight + 'px' }">
    </view>

    <!-- 词云图容器 -->
    <view class="word-cloud-container">
      <view 
        class="word-item" 
        v-for="(word, index) in wordCloudData" 
        :key="word.text"
        :style="getWordStyle(word)"
        @click="handleWordClick(word)"
      >
        {{ word.text }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useNavBar } from '@/hooks/useNavBar'

// 词云数据类型
interface WordItem {
  text: string
  weight: number
  color: string
  size: number
  x: number
  y: number
}

const { statusBarHeight, navBarHeight } = useNavBar()

// 词云数据
const wordCloudData = ref<WordItem[]>([])

// 颜色配置
const colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1', '#14b8a6', '#f43f5e']

// 技术词汇数据
const techWords = [
  { text: 'Vue', weight: 10 }, { text: 'React', weight: 9 }, { text: 'JavaScript', weight: 8 },
  { text: 'TypeScript', weight: 7 }, { text: 'Node.js', weight: 6 }, { text: 'Webpack', weight: 5 },
  { text: 'Vite', weight: 5 }, { text: 'CSS3', weight: 4 }, { text: 'HTML5', weight: 4 },
  { text: 'ES6', weight: 4 }, { text: '组件化', weight: 3 }, { text: '状态管理', weight: 3 },
  { text: '路由', weight: 3 }, { text: 'Hooks', weight: 3 }, { text: '性能优化', weight: 2 },
  { text: '微前端', weight: 2 }, { text: 'PWA', weight: 2 }, { text: 'SSR', weight: 2 },
  { text: 'SPA', weight: 2 }, { text: 'MVVM', weight: 2 }, { text: 'MVC', weight: 2 },
  { text: '虚拟DOM', weight: 2 }, { text: 'Diff算法', weight: 1 }, { text: '闭包', weight: 1 },
  { text: '原型链', weight: 1 }, { text: '异步编程', weight: 1 }, { text: 'Promise', weight: 1 },
  { text: 'Async/Await', weight: 1 }, { text: '模块化', weight: 1 }, { text: '工程化', weight: 1 }
]

// 已放置的词汇位置
const placedWords = ref<Array<{x: number, y: number, width: number, height: number}>>([])

/**
 * 检查是否重叠
 */
const isOverlapping = (x: number, y: number, width: number, height: number) => {
  const padding = 10 // 词汇间距
  for (const placed of placedWords.value) {
    if (x < placed.x + placed.width + padding && 
        x + width + padding > placed.x && 
        y < placed.y + placed.height + padding && 
        y + height + padding > placed.y) {
      return true
    }
  }
  return false
}

/**
 * 生成词云数据
 */
const generateWordCloud = () => {
  placedWords.value = []
  const words = [...techWords].sort((a, b) => b.weight - a.weight) // 按权重排序
  
  wordCloudData.value = words.map((word, index) => {
    const size = Math.max(24, word.weight * 6 + 20)
    const width = word.text.length * size * 0.6
    const height = size * 1.2
    
    // 寻找合适位置
    let x = 0, y = 0, attempts = 0
    do {
      x = Math.random() * (750 - width) // 屏幕宽度减去词汇宽度
      y = Math.random() * (600 - height) // 屏幕高度减去词汇高度
      attempts++
    } while (isOverlapping(x, y, width, height) && attempts < 100)
    
    // 记录位置
    placedWords.value.push({ x, y, width, height })
    
    return {
      text: word.text,
      weight: word.weight,
      color: colors[index % colors.length],
      size,
      x,
      y
    }
  })
}

/**
 * 获取词汇样式
 */
const getWordStyle = (word: WordItem) => {
  return {
    position: 'absolute' as const,
    left: `${word.x}rpx`,
    top: `${word.y}rpx`,
    fontSize: `${word.size}rpx`,
    color: word.color,
    fontWeight: word.weight > 5 ? 'bold' : 'normal',
    zIndex: word.weight
  }
}

/**
 * 处理词汇点击 - 跳转到搜索页面
 */
const handleWordClick = (word: WordItem) => {
  uni.navigateTo({
    url: `/pages/search/search?keyword=${encodeURIComponent(word.text)}`
  })
}

/**
 * 刷新词云
 */
const refreshWordCloud = () => {
  generateWordCloud()
  uni.showToast({
    title: '词云已刷新',
    icon: 'success'
  })
}

/**
 * 页面加载时初始化数据
 */
onMounted(() => {
  generateWordCloud()
})
</script>

<style lang="scss" scoped>
.word-cloud-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 导航栏
.nav-bar {
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 100%;
    
    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #1f2937;
    }
    
    .refresh-btn {
      font-size: 28rpx;
      color: #3b82f6;
      padding: 12rpx 24rpx;
      background-color: #f0f9ff;
      border-radius: 20rpx;
      
      &:active {
        background-color: #e0f2fe;
      }
    }
  }
}

// 词云容器
.word-cloud-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 120rpx);
  padding: 20rpx;
  
  .word-item {
    position: absolute;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    
    &:active {
      transform: scale(0.95);
      opacity: 0.7;
    }
  }
}
</style>